<script>
import AppHeader from './components/AppHeader.vue';
import AuthContainer from './components/AuthContainer.vue';
import MusicPlayer from './components/MusicPlayer.vue';

export default {
  name: 'App',
  components: {
    AppHeader,
    AuthContainer,
    MusicPlayer,
  },
  created() {
    this.$store.dispatch('init_login');
  },
};
</script>
<template>
  <!-- Header -->
  <app-header />
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component"></component>
    </transition>
  </router-view>
  <music-player />
  <!-- Auth Modal -->
  <AuthContainer />
</template>

<style>
.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: all 0.3s linear;
}

.fade-leave-to {
  transition: all 0.3s linear;
  opacity: 0;
}
</style>
